<template>
  <div id="main">Echarts数据展示</div>
</template>

<script>
import * as echarts from "echarts";
import { reduce } from "lodash-es";
export default {
  name: "",
  data() {
    return {};
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    //注意使用echarts 表一定要给容器设置大小否则不显示
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        //提示框组件
        text: "ECharts 入门示例",
        textStyle: {
          color: "red",
          // left: "left",
        },
        left: "left",
        subtext: "我恁爹",
      },
      tooltip: {
        // trigger: "axis",
        // 百分比
        formatter: (params) => {
          return `${params.name}在${params.seriername}中的占比为：</br>${(params.value / 280 * 100).toFixed(2)}%`
        }
      },
      legend: {
        data: [
          {
            name: "销量",
            icon: "circle",
            textStyle: {
              color: "red",
            },
          },
          "价格",
          "占比",
        ],
      },

      // tooltip: {},
      xAxis: {
        data: [
          {
            value: "衬衫",
            textStyle: {
              color: "red",
              fontSize: 20,
            },
          },
          "羊毛衫",
          "雪纺衫",
          "裤子",
          "高跟鞋",
          "袜子",
        ],
      },
      yAxis: {
        // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
      series: [
        //系列的意思可以在数组中设置多个图标对象一个对象就是一个图标结构类型
        {
          name: "销量", //系列名
          type: "bar", //柱形图
          data: [5, 20, 36, 10, 10, 200],
        },
        {
          name: "价格", //系列名
          type: "line", //折现图
          data: [15, 30, 39, 10, 1, 200],
        },
        {
          name: "占比", //系列名
          type: "pie", //折现图
          data: [
            { name: "鞋子", value: 10 },
            { name: "帽子", value: 50 },
            { name: "吧子", value: 40 },
          ],
        },
      ],
    });
  },
};
</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  height: 600px;
  border: 1px solid #000;
}
</style>